<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="./jtopo-0.4.8-min.js"></script>
        <script type="text/javascript" src="./toolbar.js"></script>
        <script type="text/javascript">
             $(document).ready(function(){
            var canvas = document.getElementById('canvas');   
            // 创建一个舞台对象         
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);
            // 创建一个场景对象
            var scene = new JTopo.Scene();
            // 设置场景背景
            scene.background = './bg.jpg';
            stage.add(scene);

            // 新建两个 node 节点，设置节点坐标，并把节点放到场景中
            var node = new JTopo.Node("右键菜单-A");    
            node.setLocation(200,200);
            scene.add(node);
            
            var node2 = new JTopo.Node("右键菜单-B");    
            node2.setLocation(400,200);
            scene.add(node2);

            // 存储当前节点
            var currentNode = null;
            // 不同节点的显示位置
            function handler(event){
                if(event.button == 2){// 右键
                    // 当前位置弹出菜单（div）
                    $("#contextmenu").css({
                        top: event.pageY,
                        left: event.pageX
                    }).show();    
                }
            }
            // 不同节点的 松开 监听事件
            node.addEventListener('mouseup', function(event){
                currentNode = this;
                handler(event);
            });
            node2.addEventListener('mouseup', function(event){
                currentNode = this;
                handler(event);
            });
            
            // 点击场景中任意位置，关闭弹出的菜单
            stage.click(function(event){
                if(event.button == 0){// 左键
                    // 关闭弹出的菜单（div）
                    $("#contextmenu").hide();
                }
            });
                        
            /*
            <ul id="contextmenu" style="display:none;">    
            <li><a>顺时针旋转</a></li>
            <li><a>逆时针旋转</a></li>    
            <li><a>更改颜色</a></li>
            <li><a>放大</a></li>
            <li><a>缩小</a></li>    
            <li><a>删除该节点</a></li>
            </ul>*/
            /* 右键菜单处理 */    
            $("#contextmenu a").click(function(){
                var text = $(this).text();
                
                if(text == '删除该节点'){
                    scene.remove(currentNode);
                    currentNode = null;
                }if(text == '撤销上一次操作'){
                    currentNode.restore();
                }
                if (currentNode != null){
                    currentNode.save();
                }
                
                if(text == '更改颜色'){
                    currentNode.fillColor = JTopo.util.randomColor();
                }else if(text == '顺时针旋转'){
                    currentNode.rotate += 0.5;
                }else if(text == '逆时针旋转'){
                    currentNode.rotate -= 0.5;
                }else if(text == '放大'){
                    currentNode.scaleX += 0.2;
                    currentNode.scaleY += 0.2;
                }else if(text == '缩小'){
                    currentNode.scaleX -= 0.2;
                    currentNode.scaleY -= 0.2;
                }
                $("#contextmenu").hide();
            });
        });
        </script>
    </head>
    <body>
      <ul id="contextmenu" style="display:none;position: absolute;">    
        <li><a>顺时针旋转</a></li>
        <li><a>逆时针旋转</a></li>    
        <li><a>更改颜色</a></li>
        <li><a>放大</a></li>
        <li><a>缩小</a></li>    
        <li><a>撤销上一次操作</a></li>    
        <li><a>删除该节点</a></li>
      </ul>
      <div id="content">
        <canvas id="canvas" width="910" height="400"></canvas>
      </div>
    </body>
</html>